﻿<%@ Page Title="编辑用户" Language="C#" MasterPageFile="~/master/m.master" %>
<script runat="server"></script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="../assets/css/plugins/iCheck/custom.css" rel="stylesheet" />
<link href="../assets/css/system/addUser.css" rel="stylesheet" />
<link href="../assets/img/validate/validate.css" rel="stylesheet">
<style type="text/css">
.checkbox label{
	padding: 0;
}
/*图片样式*/
        img.face {
            max-width: 200px;
            max-height: 200px;
        }

        button.fa:before {
            margin-right: 5px;
        }

        dl {
        }

            dl dt {
                float: left;
                text-align: right;
                padding: 0 15px;
            }

            dl dd {
                float: left;
                width: calc(100%-50px);
            }

        nav ul.pagination {
            margin: 0;
        }

        #pro-list-choosen div.thumbnail > img,
        #pro-list-to-choose div.thumbnail > img {
            height: 58px;
        }

        div.thumbnail > .caption > h4 {
            white-space: nowrap;
            overflow: hidden;
        }

        .mix-images div.thumbnail > img {
            height: 250px;
        }

        ul.product-color-list {
            margin: 0;
            padding: 0;
        }

            ul.product-color-list li {
                float: left;
                width: 250px;
                margin: 5px;
                border: 1px solid #efefef;
                list-style: none;
            }

                ul.product-color-list li.selected {
                    border: 1px solid #ff1493;
                }
                label {
                       margin: 12px 0px 10px 1px;
                }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" Runat="Server">
	<div class="add-user-page">
		<form id="checkModuleForm" method="get" action="#">
			<div id="message" style="display: none"></div>
			<div class="base-info">
				<table class="user-info" cellpadding="0" cellspacing="0">
					<thead></thead>
					<tbody>
						<tr>
							<td>
								<div class="form-group">
									<label class="control-label">用户昵称&nbsp;&nbsp;</label>
									<input id="UserName" name="UserName" placeholder="请输入用户昵称" 
										datacol="yes" err="用户昵称" checkexpession="NotNull"
										maxlength="10" class="form-control input-text required" />
								</div>
							</td>
							<td>
								<div class="form-group">
									<label class="control-label">用户编号&nbsp;&nbsp;</label>
									<input id="UserNo" name="UserNo" placeholder="请输入用户编号" 
										datacol="yes" err="用户编号" checkexpession="NotNull"
										maxlength="10" class="form-control input-text required" />
								</div>
							</td>
						</tr>
	
						<tr>
							<td>
								<div class="form-group">
									<label class="control-label">登录账号&nbsp;&nbsp;</label>
									<input id="LoginAccount" name="LoginAccount" placeholder="请输入登录账号" 
										datacol="yes" err="登录账号" checkexpession="NotNull"
										maxlength="20" class="form-control input-text required" />
								</div>
							</td>
							<td>
								<div class="form-group">
									<label class="control-label">手机号码<span style="color: #f00;">&nbsp;&nbsp;</span></label>
									<input id="Tel" name="Tel" placeholder="请输入手机号码" 
										maxlength="11" class="form-control input-text" />
								</div>
							</td>
						</tr>
	
						<tr>
							<td>
								<div class="form-group">
									<label class="control-label">电子邮箱&nbsp;&nbsp;</label>
									<input id="Email" name="Email" placeholder="在此输入电子邮箱" 
										datacol="yes" err="电子邮箱" checkexpession="EmailOrNull"
										maxlength="20" class="form-control input-text" />
								</div>
							</td>
							<td>
								<div class="form-group">
									<label class="control-label">员工类别&nbsp;&nbsp;</label>
									<select id="UserType" class="form-control m-b col-select">
										<option value="1">系统账号</option>
										<option value="2">普通账号</option>
									</select>
								</div>
							</td>
						</tr>
	
						<tr>
							<td>
								<div class="form-group">
									<label class="control-label">用户性别</label>
									<div class="radio i-checks">
										<label>
	                                       	<span class="gender-text">男</span>
	                                        <input type="radio" value="1" name="Sex" />
	                                    </label>
									</div>
									<div class="radio i-checks">
										<label>
	                                       	<span class="gender-text">女</span>
	                                        <input type="radio" value="0" name="Sex" />
	                                    </label>
									</div>
								</div>
							</td>
							<td>
								<div class="form-group">
									<label class="control-label">员工状态&nbsp;&nbsp;</label>
									<select id="UserStatus" class="form-control m-b col-select">
										<option value="1">在职</option>
										<option value="2">离职</option>
									</select>
								</div>
							</td>
						</tr>
	
						<tr>
							<td colspan="2">
								<div class="form-group address-info">
									<label class="control-label">所在地区&nbsp;&nbsp;</label>
									<select id="Province" class="form-control m-b col-select-addr province">
									</select>
		
									<select id="City" class="form-control m-b col-select-addr">
									</select>
							
									<select id="Area" class="form-control m-b col-select-addr">
									</select>
								</div>
							</td>
						</tr>
	
						<tr>
							<td colspan="2">
								<div class="form-group">
									<label class="control-label">详细地址&nbsp;&nbsp;</label>
									<input id="Address" name="Address" placeholder="在此输入详细地址"
										maxlength="50" class="form-control input-text-full" />
								</div>
							</td>
						</tr>
	
						<tr>
							<td>
								<div class="form-group">
									<label class="control-label">入职日期&nbsp;&nbsp;</label>
									<input id="EntryDate" class="form-control input-text" readonly="readonly" 
										placeholder="入职日期" />
								</div>
							</td>
							<td>
								<div class="form-group">
									<label class="control-label">所在岗位&nbsp;&nbsp;</label>
									<select id="PostID" class="form-control m-b col-select">
										
									</select>
								</div>
							</td>
						</tr>
	
						<tr>
							<td>
								<div class="form-group">
									<label class="control-label">是否有效&nbsp;&nbsp;</label>
									<div class="checkbox i-checks">
										<label class="effective">
											<input id="IsEffective" type="checkbox" checked="">
										</label>
									</div>
								</div>
							</td>
							<td>
								<div class="form-group">
									<label class="control-label">系统类型&nbsp;&nbsp;</label>
									<select id="SysType" class="form-control m-b col-select">
										
									</select>
								</div>
							</td>
						</tr>
	
						<tr>
							<td colspan="2">
								<div class="form-group">
									<label class="control-label multi">备注说明&nbsp;&nbsp;</label>
									<textarea id="Memo" name="Memo" placeholder="在此输入备注说明"
										class="form-control input-textarea"></textarea>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="userhead-info">
                <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-3">
                                <div class="row">
                                    <div class="" style="line-height: 25px; border-bottom: 1px solid #ccc; padding-left: 10px; padding-top: 5px;">用户头像</div>
                                </div>
                                <div class="row ">
                                        <div class="panel panel-primary">
                                            <div class="panel-body">
                                                <div class="row">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;">0%</div>
                                                    </div>
                                                    <div class="mix-images"></div>
                                                    <div class="col col-xs-12 upload-panel">
                                                        <div class="thumbnail">
                                                            <div id="div-addImage" style="width: 100%; text-align: center; border: 1px solid #cacaca; padding: 58px 0;"><i class="fa fa-plus fa-5x"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel-footer hidden">
                                                <div style="display: none">
                                                    <input type="file" multiple="multiple" accept="image/jpeg" />
                                                </div>
                                                <p>
                                                    <button type="button" class="btn btn-warning fa fa-upload">上传</button></p>
                                            </div>
                                        </div>
                                    </div>
                            </div>
			</div>
			<div class="control">
				<button type="button" class="btn btn-white closeBtn">关闭</button>
				<button type="button" class="btn btn-primary" id="save">保存</button>
			</div>
		</form>
	</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" Runat="Server">
<script src="../assets/js/plugins/layer/laydate/laydate.js"></script>
<script src="../assets/js/plugins/iCheck/icheck.min.js"></script>
<script type="text/javascript">
    var BASE_URL = '../assets/js/plugins/webuploader';
</script>
<script src="../assets/js/page/addressConfig.js"></script>
<script src="../assets/js/common.js"></script>
<script src="../assets/img/validate/learunui-validator.js"></script>
<%--图片处理--%>
<script src="../assets/js/bootbox.min.js"></script>
    <div style="display: none">
        <div id="dialog-product-choose-color">
            <ul class="product-color-list "></ul>
        </div>
    </div>
    <script id="p1" type="text/html">
        <div class="col col-xs-12">
            <div class="thumbnail">
                <img src="../assets/img/s.gif" style="background-image: url({{d.Url}}); background-size: contain; background-repeat: no-repeat; background-position: center;" />
                <div class="caption">
                    <p>
                        <button type="button" class="btn btn-danger fa fa-remove" data-id="{{d.ID}}">移除</button>
                    </p>
                </div>
            </div>
        </div>
    </script>
<script type="application/javascript">
$(document).ready(function(){
	//用于记录上传头像
    var avatar = '';
    //用于记录input file的流对象
    var eFiles = null;
    //用于判断是否调用删除api
    var realDelete = false;
	
	//初始化单选框、复选框样式
	$(".i-checks").iCheck({
		checkboxClass:"icheckbox_square-green",
		radioClass:"iradio_square-green"
	});
	
	//限制textarea输入字数
	commonUtil.inputLimitForId('Memo',50);

	//关闭当前标签页
	var closeActiveTab = function(){
		var closeBtn = $('.J_menuTab.active i',window.parent.document);
		closeBtn.click();
	}
	$('.closeBtn').click(function(){
		closeActiveTab();
	});
	
	//初始化日期控件
    laydate({
		elem: "#EntryDate",
		format: "YYYY-MM-DD",
		min: "2000-01-01",
		max: "2099-12-01",
		istime: true,
		istoday: false,
		choose: function (datas) {
			start.min = datas
		}
	});
	
	//初始化省份
	addressConfig.p.map(function(item){
		$('#Province').append('<option value="' + item + '">'+ item +'</option>');
	});
	//加载城市
	var loadCity = function(p){
		var p = $('#Province').val();
		$('#City').empty();
		addressConfig['c'][p].map(function(item){
			$('#City').append('<option value="' + item + '">'+ item +'</option>');
		})
	};
	//加载区/县
	var loadArea = function(){
		var pc = $('#Province').val() + '-' + $('#City').val();
		$('#Area').empty();
		addressConfig['a'][pc].map(function(item){
			$('#Area').append('<option value="' + item + '">'+ item +'</option>');
		})
	}
	//选择省份
	$('#Province').change(function(){
		//填充城市
		loadCity();
		//填充区/县
		loadArea();
	});
	//选择城市
	$('#City').change(function(){
		//填充区/县
		loadArea();
	});
	
	//获取用户id
	var uid = Y.getUrlParam('id');
	var deptId = 0;
	var systype = null;
	
    //图片处理
	$('.progress').hide();

	function deleteImage(id) {
	    A.API('Image', 'Remove', {
	        id: id
	    }, function (data) {
	        $('.upload-panel').fadeIn();
	    });
	}

	function addImage(file) {
	    file.Url = Y.GetPath(file.Url);
	    var tpl = laytpl(document.getElementById('p1').innerHTML);
	    $(tpl).empty();
	    var result = tpl.render(file);
	    var el = $(result);
	    var btnRemove = el.find('button.fa-remove');
	    btnRemove.click(function () {
	        swal({
	            title: "您确定要删除这张图片吗",
	            text: "删除后将无法恢复，请谨慎操作！",
	            type: "warning",
	            showCancelButton: true,
	            confirmButtonColor: "#DD6B55",
	            confirmButtonText: "删除",
	            closeOnConfirm: false
	        }, function () {
	            deleteImage($(btnRemove).data('id'));
	            $(btnRemove).parents('div.col:first').remove();	            
	            swal("删除成功！", "您已经永久删除了这条信息。", "success");
	            //$('.upload-panel').fadeIn();
	        });
	    });
	    $('.mix-images').append(el);
	}

	function addOldImage(file) {
	    file.Url = Y.GetPath(file.Url);
	    var tpl = laytpl(document.getElementById('p1').innerHTML);
	    var result = tpl.render(file);
	    var el = $(result);
	    var btnRemove = el.find('button.fa-remove');
	    btnRemove.click(function () {
	        swal({
	            title: "您确定要删除这张图片吗",
	            text: "删除后将无法恢复，请谨慎操作！",
	            type: "warning",
	            showCancelButton: true,
	            confirmButtonColor: "#DD6B55",
	            confirmButtonText: "删除",
	            closeOnConfirm: false
	        }, function () {
	            deleteImage($(btnRemove).data('id'));
	            $(btnRemove).parents('div.col:first').remove();	            
	            swal("删除成功！", "您已经永久删除了这条信息。", "success");
	            //$('.upload-panel').fadeIn();
	        });
	    });
	    $('.mix-images').append(el);
	}

	Kmer.Uploader({
	    el: 'input[type=file]',
	    Path: 'USER',
	    OnProgress: function (f, pc) {
	        $('.progress').show();
	        $('.progress-bar').css('width', pc.toString() + '%').text(pc.toString() + '%');
	    },
	    OnAllComplete: function () {
	        $('.progress').hide();
	    },
	    OnComplete: function (f, data) {
	        if (data.Success === true) {
	            var file = data.Data;
	            addImage(file);
	            $('.upload-panel').fadeOut();
	        } else {
	            bootbox.alert("上传错误，请重新选择图片（JPG、小于5Mbs）\n" + data.Message);
	        }
	    }
	});
	$('#div-addImage,button.fa-upload').click(function () {
	    $('input[type=file]').click();
	});
	
	//获取用户信息
	layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
	Y.API2('Users', 'GetID', {
		UserID: uid,
	},function(data){
		if(data.Success == false){
			layer.closeAll('dialog');
			swal(data.Message, '', 'error');
		}else{
			$('#UserNo').val(data.UserNo);
			$('#UserName').val(data.UserName);
			$('#LoginAccount').val(data.LoginAccount);
			$('#Email').val(data.Email);
			$('#UserType').val(data.UserType);
			$('#UserStatus').val(data.UserStatus);
			if(data.Sex){
				$('.iradio_square-green').eq(0).addClass('checked') 
				$('.iradio_square-green').eq(0).find('input').click();
			}else{
				$('.iradio_square-green').eq(1).addClass('checked') 
				$('.iradio_square-green').eq(1).find('input').click();
			}

			$('#EntryDate').val(data.EntryDate.substring(0,10));
			
			if(!Y.checkNull(data.Province))
				$('#Province').val(data.Province);
				
			//初始化城市
			loadCity();
	
			if(!Y.checkNull(data.City))
				$('#City').val(data.City);
			
			//初始化区
			loadArea();
			
			if(!Y.checkNull(data.Area))
				$('#Area').val(data.Area);
				
			$('#Address').val(data.Address);
			$('#Tel').val(data.Tel);
			deptId = data.DeptID;
			systype = data.SysType;

			if(!data.IsEffective)
				$('#IsEffective').parent().click();
				
			$('#Memo').val(data.Memo);			
			
			//加载岗位列表
			Y.API2('Post', 'GetList', {
				DeptID: deptId,
			},function(result){
				layer.closeAll('dialog');
				if(result.Success == false){
					swal(result.Message, '', 'error');
				}else{
					var html = '';
					var count = 0;
					result.map(function(item){
						html += '<option value="'+ item.PostID +'">'+ item.PostName +'</option>';
						if(data.PostID == item.PostID){
							count = -1;
						}
						count++;
					})
					$('#PostID').append(html);
					$('#PostID').val(data.PostID);
					if(count == result.length && result.length > 0){
						$('#PostID').val(result[0]['PostID']);
					}
				}
			});

		    //加载系统类型
			Y.API2('SysDict', 'GetList', {
			    DictValue: "C-System",
			},function(result){
			    layer.closeAll('dialog');
			    if (result.Success==false) {
                    swal(result.Message,'','error');
			    }else{
			        var html = '';
			        var count = 0;
			        result.map(function(item){
			            html += '<option value="' + item.DictValue + '">' + item.DictName + '</option>';
			        })
			        $('#SysType').append(html);
			        $('#SysType').val(systype);
			    }
			});
		    //显示图片
			if (data.Avatar != undefined) {
			    addOldImage({
			        Title: '',
			        ID: data.Avatar,
			        Url: data.ImageUrl
			    });
			    $('.upload-panel').fadeOut();
			}
			else {
			    $('.upload-panel').fadeIn();
			}
		}
	});
	
	$('#save').click(function(){
		//检验提交信息
        if (!CheckDataValid('#checkModuleForm')) {
            return false;
        }
        var imgs = [];
        $('div.mix-images button[data-id]').each(function (index, el) {
            imgs.push($(el).data('id'));
        });
        var img = imgs[0];
		layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
		Y.API2('Users', 'Modify', {
			UserID: uid,
			UserNo: $('#UserNo').val(),
			UserName: $('#UserName').val(),
			LoginAccount: $('#LoginAccount').val(),
			Email: $('#Email').val(),
			UserType: $('#UserType').val(),
			UserStatus: $('#UserStatus').val(),
			Sex: $('.iradio_square-green.checked input').val(),
			EntryDate: $('#EntryDate').val(),
			Province: $('#Province').val(),
			City: $('#City').val(),
			Area: $('#Area').val(),
			Address: $('#Address').val(),
			Tel: $('#Tel').val(),
			DeptID: deptId,
			PostID: $('#PostID').val(),
			IsEffective: $('#IsEffective').is(':checked'),
			Memo: $('#Memo').val(),
			SysType: $('#SysType').val(),
            Avatar: img,
		},function(data){
			layer.closeAll('dialog');
			if(data.Success == false){
				swal(data.Message, '', 'error');
			}else{
				swal({
					title: '编辑成功',
					type: 'success'
				},function(){
					//刷新用户管理页
					if(window.parent.frames['iframe9'])
						window.parent.frames['iframe9'].document.getElementById('refreshBtn').click();
					
					//关闭当前页面
					closeActiveTab();
				});
			}
		});
	})
});
</script>
</asp:Content>